

<template>
  <!-- 
     读卡 读不到只能新建 所以输入没有必要
     读卡  读到了  就只能修改了
     所以输入是没有必要的
-->
  <div class="addUpdate">
    <div class="dukaBut">
      <el-button class="butB_Add" size="mini" @click="DuKa()">读卡</el-button>
      <el-button class="butB_Add" size="mini" @click="openUserInfo(1)">新建患者信息</el-button>
   <el-radio-group  v-model="mdtrt_cert_type">
     
      <el-radio   :label="'02'">身份证</el-radio>
      <el-radio :label="'03'">社保卡</el-radio>
    </el-radio-group>
     <!-- <el-checkbox v-model="is_yd">是否异地</el-checkbox> -->
    </div>
               
    <ViewTitle text="基础信息" />
    <div class="box1">
      <div class="yisheng">
        <span>患者姓名:</span>

        <el-popover
          placement="bottom-end"
          v-model="visiblePatient"
          trigger="focus"
        >
          <el-input
            placeholder="请输入患者姓名"
            slot="reference"
            v-model="params.patient_name"
            size="mini"
            @input="getpatientList()"
          >
            <i
              slot="suffix"
              v-if="params.member_id"
              class="iconfont icon-edit-bai"
              @click.stop="openUserInfo(2)"
            ></i>
          </el-input>


          <el-table
            v-loading="patientLoading"
            @current-change="xuanzePatient"
            highlight-current-row
            height="300"
            :data="
              patientData.filter(
                (data) =>
                  !params.patient_name ||
                  data.name
                    .toLowerCase()
                    .includes(params.patient_name.toLowerCase())
              )
            "
          >
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>

            <el-table-column
              width="100"
              property="name"
              label="姓名"
            ></el-table-column>
            <el-table-column
              width="200"
              property="id_card"
              label="卡号"
            ></el-table-column>

            <!-- <el-table-column width="50" property="gender" label="性别">
              <template slot-scope="scope">
                <div>{{ $baseBai["gender"][scope.row.gender - 1].label }}</div>
              </template>
            </el-table-column> -->

            <el-table-column
              width="150"
              property="birthday"
              label="生日"
            ></el-table-column>
          </el-table>

          <el-pagination
            :current-page="page"
            :page-size="limit"
            @current-change="handlePagination"
            :total="patientCount"
            layout="prev, pager, next"
          >
          </el-pagination>
        </el-popover>
      </div>
      <div>
        <span>身份证:</span>
        <el-input
          size="mini"
          @input="inputCard"
          v-model="params.id_card"
          placeholder="请输入卡号"
        ></el-input>
      </div>
      <div>
        <span>性别:</span>
        <el-select
          size="mini"
          
          v-model="params.gender"
          placeholder="请选择性别"
        >
          <el-option
            v-for="(item, index) in $baseBai['gender']"
            :key="'index2' + index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span>年龄:</span>
        <el-input
          
          size="mini"
          type="number"
          v-model="params.age"
          placeholder="请输入年龄"
        ></el-input>
      </div>
      <div>
        <span>生日:</span>

        <el-date-picker
          
          v-model="params.birthday"
          size="mini"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>

      <div>
        <span>移动电话:</span>
        <el-input
          
          size="mini"
          type="tel"
          v-model="params.phone"
          placeholder="请输入电话"
        ></el-input>
      </div>
      <div>
        <span>家庭住址:</span>
        <el-input
          
          size="mini"
          v-model="params.address"
          placeholder="请输入家庭住址"
        ></el-input>
      </div>
      <div>
        <span>病人性质:</span>

        <el-select
          size="mini"
          v-model="params.member_type"
          placeholder="请选择病人性质"
        >
          <el-option
            v-for="(item, index) in dict_member_type"
            :key="'index3' + index"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="viewTitle-essential">
      <div class="essential-left"></div> 
      <div class="essential-text">陪护人信息</div>
      <el-button class="butB_Add with_user_add"  size="mini" @click="addWith_user" >添加更多陪护人</el-button>
     
    </div>

    <div class="box1" :style="{paddingTop:(index!==0?'0px':'20px')}"   v-for="(item,index) in params.with_user" :key="index" >
      
       

      <div>
        <span>陪护人姓名:</span>
        <el-input
          size="mini"
          v-model="item.name"
          placeholder="请输入陪同人员姓名"
        >
        </el-input>
      </div>
       <div>
        <span>性别:</span>
        <el-select
          size="mini"
          
          v-model="item.gender"
          placeholder="请选择性别"
        >
          <el-option
            v-for="(item, index) in $baseBai['gender']"
            :key="'index2' + index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span>联系方式:</span>
        <el-input
          size="mini"
          type="tel"
          v-model="item.phone"
          placeholder="请输入陪同人员手机号"
          maxlength="11"
        ></el-input>
      </div>
      
      <div style="po">
        <span>关系:</span>
        <el-select
          size="mini"
          v-model="item.relation"
          placeholder="请选择陪同人员与病人的关系"
        >
          <el-option
            v-for="(item, index) in $baseBai['relation']"
            :key="'index3' + index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>

         <i v-if="index!==0" class="iconfont with_user_del icon-del-bai"  @click="delWith_user" ></i>
      </div>

    </div>
 
    <ViewTitle text="挂号信息" />

    <div class="box1">
       <!-- <div>
        <span>科室:</span>
            <el-cascader
             size="mini"
                      v-model="params.department_id"
                      :options="departmentoptions"
                      :props="{ label: 'name', value: 'id' }"
                      style="width:90%"
                      :show-all-levels="false"
                      
                    ></el-cascader>
      </div> -->
      <div class="yisheng">
        <span>医生:</span>

        <el-popover
          placement="top"
          v-model="visibleDoctor"
          trigger="focus"
        >
          <el-input
            placeholder="选择医生"
            slot="reference"
            size="mini"
            v-model="params.doctorReal_name"
            @input="getdoctorList()"
            clearable
          >
            <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-table
               height="300"
             @current-change="xuanzeDoctor"
            highlight-current-row
            :data="
              doctorData.filter(
                (data) =>
                  !params.doctorReal_name ||
                  data.doctor.real_name
                    .toLowerCase()
                    .includes(params.doctorReal_name.toLowerCase())
              )
            "
            :row-class-name="tableRowClassName"
          >
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>

            <el-table-column
              width="100"
              property="doctor.real_name"
              label="医生"
            ></el-table-column>
            <el-table-column
              width="100"
              property="doctor.dept_name"
              label="科室"
            ></el-table-column>

            <el-table-column
              width="100"
              property="doctor.positional_title"
              label="职称"
            ></el-table-column>
          </el-table>
<!-- 
          <el-pagination
            :current-page="doctorPage"
            :page-size="doctorLimit"
            @current-change="handlePagination2"
            :total="doctorCount"
            layout="prev, pager, next"
          >
          </el-pagination> -->
        </el-popover>
      </div>

     

      <div>
        <span>初复诊:</span>

        <el-select
          size="mini"
          v-model="params.look_type"
          placeholder="请选择初复诊"
        >
          <el-option
            v-for="(item, index) in $baseBai['mzsf']['gh_cfz']"
            :key="'index3' + index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div>
        <span>备注:</span>
        <el-input
          type="textarea"
          :rows="3"
          placeholder="请输入备注"
          v-model="params.remark"
        >
        </el-input>
      </div>
    </div>
    <ViewTitle text="收费信息" v-if="tableData_priceInfo.length > 0" />
    <div class="box3" v-show="tableData_priceInfo.length > 0">
      <table>
        <el-table
          border
           ref="multipleTable"
          height="250"
          @selection-change="handleSelectionChange"
          :data="tableData_priceInfo"
          style="width: 100%"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="name" label="项目" width="180">
          </el-table-column>
          <el-table-column prop="price" label="金额" width="180">
          </el-table-column>
        </el-table>
      </table>
    </div>
    <div class="box1" style="padding-top: 0">
      <div>
        <span>应收:</span>
        <el-input
          size="mini"
          disabled
          v-model="params.should_amount"
          placeholder="请输入"
        ></el-input>
      </div>
      <!-- <div>
        <span>抹零:</span>
        <el-input
          size="mini"
          disabled
          v-model="params.erase_amount"
          placeholder="请输入"
        ></el-input>
      </div> -->
      <div>
        <span>收费:</span>
        <el-input
          size="mini"
          disabled
          v-model="params.amount"
          placeholder="请输入"
        ></el-input>
      </div>
      <!-- <div>
        <span>收银:</span>
        <el-input
          size="mini"
          @input="changeCollect_amount"
          v-model="params.collect_amount"
          placeholder="请输入"
        ></el-input>
      </div> -->
      <!-- <div>
        <span>找零:</span>
        <el-input
          size="mini"
          disabled
          v-model="params.give_amount"
          placeholder="请输入"
        ></el-input>
      </div> -->
      <div>
        <span>收款方式:</span>

        <el-select
          size="mini"
          v-model="params.payment"
          placeholder="请选择支付方式"
        >
          <el-option
            v-for="(item, index) in $baseBai['payment']"
            :key="'4' + index"
            :label="item.label"
            :value="item.value"
            :disabled="item.value == 5"
          >
          </el-option>
        </el-select>
      </div>

      <!-- <div>
        <span>打印格式:</span>
        <el-input
          size="mini"
          v-model="params.kahao"
          placeholder="请输入"
        ></el-input>
      </div> -->
    </div>
    <div style="text-align: center">
      <el-button class="butB_Add" style="width: 200px" @click="save()"
        >保存</el-button
      >

    
    </div>
    <div>
      <el-dialog
        title="病人信息管理(新增)"
        :modal="false"
        :modal-append-to-body="true"
        :visible.sync="showAddUserInfo"
        :close-on-click-modal="false"
         v-if="showAddUserInfo"
        :destroy-on-close="true"
      >
        <addUserInfo
          @openUserInfo="openUserInfo"
          ref="UserInfo"
          :showAddUserInfo="showAddUserInfo"
          :params="paramsUserInfo"
        ></addUserInfo>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import ViewTitle from "@/forComponents/viewTitle/index.vue";
import addUserInfo from "./addUserInfo.vue";
import selectInput from "@/components/select"
import { mapState,mapActions } from "vuex";
import { getOrganization,deptAll } from "@/api/organization";
export default {
  data() {
    return {
      patientLoading: false,
      visibleDoctor: false,
      visiblePatient: false,
      search: "",
      showAddUserInfo: false,
      mdtrt_cert_type:'02',
      params: {
        id: "",
        patient_name: "",
        id_card: "",
        gender: '',
        age: "",
        birthday: "",
        nation:'',
        department_id:'',
        // tizhong: "",
        // shenggao: "",
        // xingzhi: "",
        phone: "",
        address: "",
        member_type: "",
        fast_name:'',
        fast_phone:'',
        with_user:[{
          name:'',
          phone:'',
          gender:'',
          relation:'',
        }],
      
        doctorReal_name: "",
        doctorReal_id: "",
        doctorDept_id: "",
        doctorDept_name: "",

        look_type: 2, //初复诊
        remark: "", //备注

        should_amount: 0, //应收
        erase_amount: 0, //抹零
        amount: 0, //收费
        collect_amount: 0, //收银
        give_amount: 0, //找零

        payment: '1', //支付方式
        fee_items: "",
      },
      is_yd:false,
      paramsUserInfo: {
         with_user:[{
          name:'',
          phone:'',
          gender:'',
          relation:'',
        }],
      },
      tableData_priceInfo: [],
      patientData: [],
     
      page: 1,
      limit: 10,
      patientCount: 0,
 doctorData: [],
      doctorPage: 1,
      doctorLimit: 1000,
      doctorCount: 0,
      doctorLoading: false,

       setSelectInput:{
          placeholder:'请选择科室',
          key:'keshi',
          url:'getDeptIndex',
         keyword:'',
         id:'',
          statusdoctor:false,
        list:[
        
         
          {label:'科室',prop:'name'},
         
        ],

      },
      departmentoptions:[],
      fsilt:true
    };
  },
  mounted() {
    this.getpatientList();
    this.getdoctorList();
    this.getOrganization()
  },
    computed: {
    ...mapState({
    
      dict_member_type:state => state.dictBai.dict_member_type,
     
    }),
  },
  methods: {

     inputCard(){
    //  console.log("e",e)

      let t=this;
    let str= this.$utilsB.GetAge(t.params.id_card)
      if(str){
        
         this.params.age=str.age;
          this.params.gender=str.gender;
         this.params.birthday=str.birthday;
      }
   console.log("utilsB",str)
   },
    handlePagination(e) {
      this.page = e;
      this.getpatientList();
    },
  

    getdoctorList() {
      this.doctorLoading = true;
    
      let d = {
        keyword: this.params.doctorReal_name,
        page: this.doctorPage,
        limit: this.doctorLimit,
        // doctor_dept:this.setSelectInput.id,
      };
      this["_API"].getRegisterDoctorIndex(d).then((res) => {
        this.doctorLoading = false;
        if (res.code == 200) {
          this.doctorData = res.data.list;
          if(this.fsilt){
              this.xuanzeDoctor(this.doctorData[0])
              this.fsilt=false
          }
        
          this.doctorCount = res.data.count;
        }
      });
    },
    getpatientList() {
      this.patientLoading = true;
      let d = {
        keyword: this.params.patient_name,
        page: this.page,
        limit: this.limit,
      };
      this["_API"].postMemberIndex(d).then((res) => {
        this.patientLoading = false;
        if (res.code == 200) {
          this.patientData = res.data.list;
          this.patientCount = res.data.count;
        }
      });
    },
    tableRowClassName(element) {
      if (element["row"]["doctor"].id == this.params.doctorReal_id) {
      
        return "success-row";
      } else {
        return "warning-row";
      }
      return "";
    },
     getOrganization() {
      deptAll().then(res => {
        console.log(res);
        this.departmentoptions = this.deleteChildren(res.data);
      });
    },
    //删除空childern
    deleteChildren(arr) {
      let childs = arr;
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].children) {
          if (childs[i].children.length) {
            this.deleteChildren(childs[i].children);
          } else {
            delete childs[i].children;
          }
        }
      }
      return arr;
    },
    changeCollect_amount(e) {
      console.log("e", e);

      this.params.give_amount =
        parseInt(this.params.collect_amount) -
        parseInt(this.params.should_amount);
    },
    xuanzePatient(item) {
      this.params.patient_name = item.name;
      this.params.member_id = item.id;
      this.params.id_card = item.id_card;

      this.params.gender = item.gender
        ? this.$baseBai["gender"][item.gender - 1].label
        : "";
      this.params.age = item.age;
      this.params.nation=item.nation;
      this.params.birthday = item.birthday;
      this.params.phone = item.phone;
      this.params.address = item.address;
      this.visiblePatient = false;
      if(item.with_user){
        if(item.with_user.length>0){
             this.params.with_user=item.with_user;
       
        }
      }
      
    },
    xuanzeDoctor(item) {
      console.log("item",item)
      if(!item){
        return
      }
    
      this.params.doctorReal_name = item.doctor.real_name;
      this.params.doctorReal_id = item.doctor.id;
      this.params.doctorDept_id = item.doctor.dept_id;
      this.params.doctorDept_name = item.doctor.dept_name;
      this.visibleDoctor = false;
      console.log("item", item);
      this.tableData_priceInfo = item.register_fee;

        setTimeout((t) => {
            t.tableData_priceInfo.forEach(row => {
            if(row.id==214||row.id==212){
              console.log("进来了吗")
              t.$refs.multipleTable.toggleRowSelection(row);
            }
         
         });
        }, 100,this);
    },
    delWith_user(index){
      if( this.params.with_user.length<=1){
        return  this.$message.error({
            message: '最少添加一条陪护信息',
            type: "success",
          });
      }
        this.params.with_user.splice(index, 1)
    },
    addWith_user(){
      this.params.with_user= this.params.with_user.concat({
          name:'',
          phonoe:'',
          gender:'',
          relation:'',
        })
    },
  aa(){
     this.tableData_priceInfo.forEach(row => {
            if(row.id==214||row.id==212){
              console.log("进来了吗")
              this.$refs.multipleTable.toggleRowSelection(row);
            }
         
         });
  },
    save() {
      let d = {
        member_id: this.params.member_id,
        member_type: this.params.member_type,
        look_type: this.params.look_type,
        doctor_id: this.params.doctorReal_id,
        // department_id: this.params.department_id[this.params.department_id.length-1],
        remark: this.params.remark,
        nation:this.params.nation,
        should_amount: this.params.should_amount,
        erase_amount: this.params.erase_amount,
        amount: this.params.amount,
        collect_amount: this.params.collect_amount,
        give_amount: this.params.give_amount,
        payment: this.params.payment,
        with_user:this.params.with_user,
        fee_items: this.params.fee_items,
        member_info:{
         
          name:this.params.patient_name,
          id_card:this.params.id_card,
          phone:this.params.phone,
          gender:this.params.gender=='男'?1:this.params.gender=='女'?'2':this.params.gender,
          age:this.params.age,
          birthday:this.params.birthday,
          address:this.params.address,
         
        },
      };
      if(this.params.member_id){
        d.member_info.id=this.params.member_id;
      }
      this["_API"].postRegisterSave(d).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          this.$emit("dialogStatus", 2);
        }else{
          this.$message({
            message: res.message,
            type: "success",
          });
        }
      });

      console.log("d", d);
    },
    handleSelectionChange(val) {
      this.params.should_amount = 0;
      this.params.amount = 0;
      this.params.collect_amount = 0;
      val.forEach((item) => {
        this.params.should_amount += parseFloat(item.price);
        this.params.amount += parseFloat(item.price);
        this.params.collect_amount += parseFloat(item.price);
      });

      // if( (this.params.should_amount).split('.').length>2){
      //      this.params.give_amount=this.params.should_amount-Math.floor( this.params.should_amount * 100) / 100
      // }

      this.params.fee_items = val;
      // should_amount: "", //应收
      // erase_amount: "", //抹零
      // amount: "",       //收费
      // collect_amount: "",//收银
      // give_amount: "",    //找零
    },
    handleSelect() {},
    openUserInfo(...item) {
      //item.length表示患者信息 编辑或者修改后执行这里
      if (item.length == 2) {
        this.params.member_id = item[1].id;
        this.params.patient_name = item[1].name;
        this.params.id_card = item[1].id_card;
        this.params.gender = this.$baseBai["gender"][item[1].gender - 1].label;
        this.params.age = item[1].age;
        this.params.birthday = item[1].birthday;
        this.params.nation=item[1].nation;
        this.params.phone = item[1].phone;
        this.params.address = item[1].address;
        if(item[1].with_user){
              if(item[1].with_user.length>0){
                 this.params.with_user[0].name = item[1].with_user[0].name;
                this.params.with_user[0].phone = item[1].with_user[0].phone;
                  this.params.with_user[0].gender = item[1].with_user[0].gender;
                this.params.with_user[0].relation = item[1].with_user[0].relation;
              }
        }
       
        this.$emit("getpatientList");

        this.visiblePatient = false;
      } else {
        //1是新建患者信息 2是修改患者信息
        if (item[0] == 1) {
          this.paramsUserInfo = {
            name: "",
             with_user:[{
          name:'',
          phone:'',
          gender:'',
          relation:'',
        }],
            id_card: "",
            gender: "",
            age: "",
            birthday: "",
            phone: "",
            address: "",
            fast_name:'',
            fast_phone:'',
            nation:'',
          };
        } else if (item[0] == 2) {
           
          console.log("this.params", this.params);
          this.paramsUserInfo = {
            id: this.params.member_id,
            name: this.params.patient_name,
            id_card: this.params.id_card,
            gender: this.params.gender,
            age: this.params.age,
            birthday: this.params.birthday,
            nation:this.params.nation,
            phone: this.params.phone,
            address: this.params.address,
            with_user:this.params.with_user,
          };
        }
        this.visiblePatient = false;
      }

      this.showAddUserInfo = !this.showAddUserInfo;
    },
    DuKa() {
         let t=this;
     if(this.mdtrt_cert_type=='03'){
           t.params.member_id='';
      t['_API'].getReadcardUserinfo2({}).then(res=>{
        if(res.code==200){
          // t.params.patient_name=res.data.name;
           t.params.id_card=res.data.id_card;
            // t.params.address=res.data.address
          //  t.params.phone=res.data.phone;
          if(res.data.userinfo){
              if(res.data.userinfo.id){
                this.params.member_id=res.data.userinfo.id;
              }
          }
      

            t.inputCard()

        }
        // else{
        //    this.$message({
        //     message:res.msg
        //   })
        // }
      })
     }else{
         t.params.member_id='';
      t['_API'].getReadcardUserinfo({}).then(res=>{
        if(res.code==200){
          t.params.patient_name=res.data.name;
           t.params.id_card=res.data.id_card;
          //  t.params.phone=res.data.phone;
           t.params.address=res.data.address
          if(res.data.userinfo){
              if(res.data.userinfo.id){
                this.params.member_id=res.data.userinfo.id;
              }
          }
      

            t.inputCard()
           
        }
        // else{
        //   this.$message({
        //     message:res.msg
        //   })
        // }
      })
     }
    
      // let d = {
      //   member_id: "",
      //   id_card: "612731199502113216",
      // };
      // this["_API"].getMemberProFile(d).then((res) => {
      //   if (res.code == 200) {
      //     this.$message({
      //       message: res.message,
      //       type: "success",
      //     });
      //   }
      // });
    },
  },
  components: {
    ViewTitle,
    addUserInfo,
    selectInput,
    //  FormInfo
  },
};
</script>
<style lang='scss' scoped>
.addUpdate {
  padding: 0 5%;
  .box1 {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0 0;
    > div {
      position: relative;
      width: 20%;
      display: flex;
      align-items: center;
      // justify-content: center;
      margin-bottom: 20px;

      > span {
        display: inline-block;
        width: 80px;
      }
      /deep/ .el-input {
        width: 200px;
      }
    }
  }
  .box3 {
    margin: 20px 0;
  }

  .dukaBut {
    margin: 0px 0 20px;
  }
}
/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}
// /deep/ .el-table .success-row {
//   background: #02bf6b;
// }

/deep/ .el-table .warning-row {
  background: red;
}

/deep/ .el-table .success-row {
  background: #02bf6b;
}

/deep/ .icon-edit-bai {
  position: absolute;
  right: -32px;
  top: 50%;
  transform: translateY(-50%);
}
.viewTitle-essential{
  position: relative;
  .with_user_add{
    position: absolute;
    left: 90px;
    top: 50%;
    transform: translateY(-50%);
  }

 
}
 .with_user_del{
   margin-left: 10px;
    //  position: absolute;
    // left: 10px;
    // top: 50%;
    // transform: translateY(-50%);
  }
</style>